<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="合作赛事" />
      <view class="cooperation-events-page">
        <!-- 顶部Banner -->
        <!-- <image class="banner" :src="imgUrl + 'a.jpg'" mode="aspectFill" /> -->
        <!-- 轮播图 -->
        <view class="banner-wrap">
          <!-- <image src="https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg" class="banner-img" /> -->
          <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
              <view class="banner-content" @click="handleBannerClick(item)">
                <image v-if="item.thumb" :src="item.thumb" class="image_10" style="width: 100%; height: 100%" />
              </view>
            </swiper-item>
          </swiper>
        </view>
        <!-- 搜索框 -->
        <view class="search-bar">
          <view class="search-container">
            <input class="search-input" type="text" v-model="search" placeholder="搜索赛事名称"
              placeholder-class="search-placeholder" />
            <view v-if="search" class="clear-btn" @click="clearSearch">
              <text class="clear-icon">×</text>
            </view>
          </view>
        </view>

        <!-- 赛事列表 -->
        <view class="event-list">
          <view v-for="(event, idx) in filteredEvents" :key="idx" class="event-card" @click="toEventDetail(event)">
            <image class="event-img" :src="event.master_image" mode="aspectFill" />
            <view class="event-status">
              <image class="status-icon" :src="imgUrl + 'triangle-right@2x.png'" />
              <text>{{
                getEventStatusText(event.status)
                }}</text>
            </view>
            <view class="event-content">
              <view class="event-title">{{ event.name }}</view>
              <view class="event-info">
                <view class="info-row">
                  <image class="icon" :src="imgUrl + 'clock.png'" />
                  <text>比赛日期：{{ formatTime(event.competition_time) }}　{{ getEventTypeText(event.type) }}</text>
                </view>
                <view class="info-row">
                  <image class="icon" :src="imgUrl + 'calendar.png'" />
                  <text>截止日期：{{ formatTime(event.deadline) }}</text>
                </view>
                <view class="info-row">
                  <image class="icon" :src="imgUrl + 'location3.png'" />
                  <text class="mr-auto">地址：{{ event.address }}</text>
                  <view class="distance" v-if="event.distance">
                    <image class="icon" :src="imgUrl + 'location.png'" />
                    <text>{{ event.juli ? (event.juli/1000 ).toFixed(2) : '0.00' }}km</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { useRequest } from '@/api';
  import { getEventStatusText, getEventTypeText } from '@/utils/statusUtils.js'
  import { formatTime } from '@/utils/dateUtils.js'
  const { API_EVENT_INDEX_POST, API_HOME_BANNER_POST } = useRequest();
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const search = ref('')
  const events = ref([])
  const swiperList = ref([
    { url: imgUrl + 'a.jpg' },
    { url: imgUrl + 'b.jpg' },
    { url: imgUrl + 'c.jpg' }
  ])
  const filteredEvents = computed(() => {
    if (!search.value) return events.value
    return events.value.filter(e => e.name.includes(search.value))
  })

  // 清除搜索内容
  const clearSearch = () => {
    search.value = ''
  }

  onShow(() => {
    getBannerList();
    getEventList();//获取合作赛事列表
  })
  const getBannerList = async () => {
    let params = {
      page: 1,
      page_size: 10,
      type: 'cooperation'
    }
    swiperList.value = []
    try {
      const res = await API_HOME_BANNER_POST(params)
      console.log('getBannerList', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          swiperList.value = res.data.data
        } else {
          swiperList.value = []
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('swiperList', swiperList.value)
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  //获取合作赛事列表
  const getEventList = async () => {
    let params = {
      page: 1,
      pageSize: 10
    }
    events.value = [];
    try {
      const res = await API_EVENT_INDEX_POST(params);
      if (res.code === 1) {
        if (res.data.data.length > 0) {
          events.value = res.data.data;
        } else {
          events.value = [];
        }
        console.log('events', events.value)
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  //跳转赛事详情
  const toEventDetail = (event) => {
    uni.navigateTo({
      url: '/pages/event/eventDetails/index?id=' + event.id
    })
  }
  //跳转赛事合作
  const handleBannerClick = (item) => {
    console.log('handleBannerClick', item)
    uni.navigateTo({
      url: `/pages/CooperationApply/index?id=${item.cooperation_id}`
    })
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>